
<template>
  <div class="subpage">
   
    <my-head title="商品详情" :back="false"></my-head>
 
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(l, i) in banner" :key="i">
        <van-image :src="l.url" class="himg"></van-image>
      </van-swipe-item>
    </van-swipe>
    <div class="content">
      <h2 class="name">{{ name }}</h2>
      <div class="box" v-html="defaultSlogan"></div>
      <h2 class="price">￥{{ price }}</h2>
      <template>
        <van-stepper @change="changevalue" v-model.number="value" min="1" />
      </template>
    </div>
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="评论" color="#ee0a24" />
      <van-goods-action-icon icon="cart-o" text="购物车" @click="gotocart"/>
        <van-goods-action-icon icon="like-o" @click="todoLike" :text="(likeFlag?'已':'')+'点赞('+likeCount+')'" :color="likeFlag?'#ff5000':'#323233'" /> 
      <van-goods-action-icon icon="star-o"  @click="todoLikes" :text="(likesFlag?'已':'')+'收藏('+likesCount+')'" :color="likesFlag?'#ff5000':'#323233'"/>
      <van-goods-action-button type="warning" text="加入购物车" @click="addtoCart" />
      <van-goods-action-button type="danger" text="立即购买" @click="gotopay"/>
    </van-goods-action>
    <pictures :pictures="pictures"></pictures>
   
  </div>
</template>

<script>
export default {
 
  data() {
    return {
      banner: [],
      banners: [],
      list: [],
      defaultSlogan: {},
      name: {},
      price: {},
      pictures: [],
      value: 1,
      good:null,
      value:1,
      likeCount:0,
      likesCount:0,
      likeFlag:false,
       likesFlag:false,
      lid:"",
      check:false

    };
  },
  methods: {
    addtoCart(){
            this.checkLogin(()=>{
                // 加入购物车 
                // 1. 判购物车是否存在 
                // userInfo 
                // username
                // gid 
                // good
                // count:value 
                this.$ajax.findcart({
                    username:this.userInfo.username,
                   gid:this.$route.query.id,
                    userInfo:this.userInfo,
                            count:this.value,
                            good:this.good,
                            check:false
                           
                })
                .then(result=>{
                    if(result.length>0){
                        // 已经加入了购物车  patch 修改
                        this.$ajax.setCartOne(result[0].id,{
                            count:result[0].count + this.value
                        })
                        .then(res=>{
                            this.$toast('累计添加购物车成功')
                        })
                        
                    }else{
                        // 没有把这个商品加入购物车  post 提交
                        this.$ajax.AddToCart({
                            username:this.userInfo.username,
                            gid:this.$route.query.id,
                            userInfo:this.userInfo,
                            count:this.value,
                            good:this.good,
                            check:false
                        })
                        .then(res=>{
                            this.$toast('新增购物车成功')
                            console.log(res);
                        })
                    }
                })
            })
        },
    gotocart() {
      this.checkLogin(() => {
        this.gotoWhere({
          name: "cart",
        });
      });
    },
      gotopay(){
            this.checkLogin(()=>{
                this.gotoWhere({
                    name:"pay"
                })
            })
        },
     todoLike(){
            this.checkLogin(()=>{
                // 进行点赞和取消点赞操作 
                if(this.likeFlag){
                    // 已经点赞 需要取消点赞 
                    this.$ajax.DeleteLikes(this.lid)
                    .then(res=>{
                        this.likeFlag = false;
                        this.likeCount--; 
                        this.$toast("取消点赞成功")
                        
                    })
                }else{
                    // 没有点赞  要点赞 
                    // 添加数据  post 
                    this.$ajax.AddLikes({
                        userInfo:this.userInfo,
                        username:this.userInfo.username,
                        check:false,
                        good:this.good,
                        gid:this.good.id, // 对应的这个商品的id
                        // id:this.good.id,   覆盖post 自动添加 id字段 
                    }).then(res=>{
                        this.likeFlag = true;
                        this.lid = res.id;    
                        this.likeCount++; 
                        this.$toast("点赞成功")

                    })
                }
            })
        },
         todoLikes(){
            this.checkLogin(()=>{
               
                if(this.likesFlag){
                  
                    this.$ajax.DeletesLikes(this.lid)
                    .then(res=>{
                        this.likesFlag = false;
                        this.likesCount--; 
                        this.$toast("取消收藏成功")
                        
                    })
                }else{
                   
                    this.$ajax.AddsLikes({
                        userInfo:this.userInfo,
                        username:this.userInfo.username,
                        check:false,
                        good:this.good,
                        gid:this.good.id,
                         // 对应的这个商品的id
                      
                    }).then(res=>{
                        this.likesFlag = true;
                        this.lid = res.id;    
                        this.likesCount++; 
                        this.$toast("收藏成功")

                    })
                }
            })
        },
    checkLogin(callback) {
      if (this.userInfo) {
        callback();
      } else {
        this.$dialog
          .confirm({
            title: "登录提示",
            message: "您还未登录,请先登录~",
          })
          .then(() => {
            // on confirm
            this.$router.push({ name: "login" });
          })
          .catch(() => {
            // on cancel
          });
      }
    },
    changevalue(value) {
      if (value < 1) {
        this.value = 1;
      }
    },
    async getOPxq() {
      let res = await this.$ajax.getOPxq({
        skuId: this.$route.query.skuId,
      });
      console.log(res.data.duoDuanDetailImages);
      this.banner = res.data.duoDuanDetailImages;
      this.banners = res.data.listDisplayVediosPreviews;
        // console.log(res.data.listSells);
        this.list = res.data.listSells;
      this.defaultSlogan = res.data.defaultSlogan;
      console.log(res.data.defaultSlogan);
      this.name = res.data.name;
      this.price = res.data.originalPrice;
      this.pictures = res.data.duoDuanDescriptionImages;
    },
      async getGoodOne(){
            let res = await this.$ajax.findGoods({
               skuId:this.$route.query.skuId,
            })

            //  下次 DOM 更新循环结束之后执行延迟回调 延迟执行  setTimeout 
            // 插件里面 
            this.$nextTick(()=>{
                this.good = res[0]
                this.$forceUpdate()  // 迫使 Vue 实例重新渲染 强制刷新 
            })
        },
          async checkLikeCount(){
            let res = await this.$ajax.findLikes({
                gid:this.$route.query.skuId,
            })
            this.$nextTick(()=>{
                this.likeCount = res.length;
            })
        },
        async checkMeHasLike(){
            if(this.userInfo){
                let res = await this.$ajax.findLikes({
                    gid:this.$route.query.skuId,
                    username:this.userInfo.username
                })
                this.$nextTick(()=>{
                    this.likeFlag = !!res.length;
                    if(res.length>0){
                        this.lid =res[0].skuId;  //可能取消点赞做准备 
                    }
                })
            }
        }
    
  },
  mounted() {
    this.getOPxq();
      this.getGoodOne()
        this.checkLikeCount()
        this.checkMeHasLike()
  },
};
</script>

<style lang="scss" sloped>
.subpage {
  background: #f7f8fa;
  .himg {
    width: 100%;
    height: 300px;
  }
  .content {
    background: #fff;
    padding: 15px;
    width: 95%;
    border-radius: 10px;
    margin: 0 auto;
    .name {
      font-size: 17px;
      padding: 5px;
    }
    .box {
      font-size: 14px;
      padding: 5px;
    }
    .price {
      color: red;
      font-size: 18px;
      font-weight: bold;
    }
  }
}
</style>